<template>
  <div class="app-container" style="padding: 0px 20px 20px 20px;">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-if="isAdd"
                  >新增</el-button>
      </el-col>
    </el-row>
    <template v-for="list in recordsList">
      <el-descriptions :column="3" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 8px;"
                       v-if="recordsList.length != 0" size="small">
        <el-descriptions-item label="跟进时间：" style="margin-left:5px;">{{ list.followTime }}</el-descriptions-item>
        <el-descriptions-item label="跟进人：">{{ list.followPerson }}</el-descriptions-item>
        <el-descriptions-item label="方式：">{{ formatterType(list.type) }}</el-descriptions-item>
        <el-descriptions-item label="跟进阶段：">{{ formatterFollowStage(list.followStage) }}</el-descriptions-item>
        <el-descriptions-item label="最新进展：" style="margin-left:5px;">{{ list.latestDevelopments }}</el-descriptions-item>
        <el-descriptions-item label="附件:">
          <file-view  :type="showInfo" :businessId="list.annex"
                      :businessCode="seaRecords" @change="getFile" ></file-view>
        </el-descriptions-item>
        <el-descriptions-item label="批注人：">{{ list.annotationsName }}</el-descriptions-item>
        <el-descriptions-item label="批注：" style="margin-left:5px;">{{ list.annotations }}</el-descriptions-item>
        <el-descriptions-item style="margin-left:5px;">
          <el-link type="primary" style="margin: 20px 0px 0px 150px;" @click="handleUpdate(list)" icon="el-icon-edit"  v-if='(list.annotations == null || list.annotations == "") && isAdd' title="修改"></el-link>
          <el-link type="primary" style="margin-left: 10px;" @click="handleDelete(list.recordsId)" v-if="(list.annotations == null && userName == list.followPerson) && isAdd" icon="el-icon-delete" titl="删除"></el-link>
        </el-descriptions-item>
        <el-descriptions-item label="批注附件：" style="margin-left:5px;">
          <file-view  v-if="list.annexAn!=null" :type="showInfo" :businessId="list.annexAn"
                      :businessCode="seaRecords" @change="getFile"></file-view>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <div class="el-table__empty-block" style="width: 1253px; height: 100%;" v-if="recordsList.length == 0">
      <span class="el-table__empty-text">暂无数据</span>
    </div>

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="时间" prop="followTime" style="width: 280px;">
              <el-input v-model="form.followTime" disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="企业人员" prop="enterprisePerson" label-width="170px">
              <el-input
                v-model="form.enterprisePerson"
                placeholder="请选择企业人员"
                @focus="selectPerson()"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="跟进时间" prop="followDateTime" style="width: 280px;">
              <el-date-picker
                v-model="form.followTimeDate"
                type="datetime"
                placeholder="请选择跟进时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="disabled"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="跟进人" prop="followPerson" label-width="170px">
              <el-input v-model="form.followPerson" disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="方式" prop="type" style="height:42px ;">
              <el-select v-model="form.type" placeholder="请选择跟进方式" style="width: 220px;"
                         :disabled="disabled">
                <el-option v-for="dict in dict.type.enterprise_records" :key="dict.value"
                           :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="跟进阶段" prop="followStage" style="height:42px ;" label-width="170px">
              <el-select v-model="form.type" placeholder="请选择跟进阶段" :disabled="disabled"
                         style="width: 270px;">
                <el-option v-for="dict in dict.type.tracking_stage" :key="dict.value"
                           :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="最新进展" prop="latestDevelopments">
          <el-input v-model="form.latestDevelopments" type="textarea" placeholder="请输入内容" :rows="4" :disabled="isShow"
                    :min-height="192"  maxlength="500"  show-word-limit/>
        </el-form-item>
        <el-form-item label="附件">
          <file-view  v-if="isUpload" :type="UploadType" :businessId="form.annex"
                      :businessCode="seaRecords" @change="getFile"></file-view>
        </el-form-item>
        <el-form-item label="批注" prop="annotations" v-if="isShow">
          <el-input v-model="form.annotations" type="textarea" placeholder="请输入内容" :rows="4" :min-height="192"  maxlength="500"  show-word-limit/>
        </el-form-item>
        <el-form-item label="批注附件"  v-if="isShow">
          <file-view  v-if="isShow" :type="fileType" :businessId="form.annexAn"
                      :businessCode="seaRecords" @change="getFile"></file-view>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <enterprise-user :enterprise-id="bId" :enterprise-type="enterpriseType" @select-user="selectUser" :is-enterprise="openPersonVisible"></enterprise-user>
  </div>
</template>

<script>
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/electric/records";
import FileView from "@/components/FileView/index"
import enterpriseUser from "../person/enterpriseUser.vue";

export default {
  name: "Records",
  components: { FileView, enterpriseUser },
  props: {
    bId: {
      type: String,
      default: ""
    },
    isAdd:{
      type: Boolean,
      default: true
    }
  },
  dicts: ['enterprise_records','tracking_stage'],
  data() {
    return {
      fileType: 0,
      showInfo: 2,
      openPersonVisible: false,
      enterpriseType: "电销",
      uuid: "",
      cordId: "",
      isShow: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      recordsList: [],
      // 弹出层标题
      title: "",
      userName:this.$store.state.user.name,
      dialogVisible: false,
      dialogImageUrl: '',
      seaRecords: "eleRecords",
      isUpload:false,
      UploadType:0,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        electricId: null,
        followTime: null,
        followId: null,
        followPerson: null,
        type: null,
        latestDevelopments: null,
        annotationsId: null,
        annotationsName: null,
        annotations: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.queryParams.electricId = this.bId;
      console.log(this.queryParams.electricId)
      listRecord(this.queryParams).then(response => {
        this.recordsList = response.rows;
        console.log(this.recordsList)
      });
    },
    // 取消按钮
    cancel() {
      this.isUpload=false;
      this.isShow=false;
      this.open = false;
      this.reset();
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    getFile(data) {
      console.log(JSON.stringify(data))
    },
    formatterFollowStage(value) {
      var type = "";
      this.dict.type.tracking_stage.forEach(item => {
        if (item.value == value)
          type = item.label;
      });
      return type;
    },
    // 表单重置
    reset() {
      this.form = {
        recordsId: null,
        businessId: null,
        followTime: null,
        followId: null,
        followPerson: null,
        type: null,
        latestDevelopments: null,
        annotationsId: null,
        annotationsName: null,
        annotations: null,
        annex:null,
        annexAn:null,
        followDateTime:null,
        enterprisePerson: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.recordsId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.isShow = false;
      this.form.followPerson = this.$store.state.user.name;
      this.form.followTime = this.showDate();
      this.form.electricId = this.bId;
      this.form.annex=new Date().getTime();
      this.UploadType=0;
      this.isUpload=true;
      this.open = true;
      this.title = "新增进展记录";
    },
    formatterType(value) {
      var type = "";
      this.dict.type.enterprise_records.forEach(item => {
        if (item.value == value)
          type = item.label;
      });
      return type;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const recordsId = row.recordsId || this.ids
      getRecord(recordsId).then(response => {
        this.form = response.data;
        if (this.form.annexAn===null){
          this.form.annexAn=new Date().getTime();
          this.fileType = 0;
        }else {
          this.fileType=1;
        }
        this.UploadType=1;
        this.isUpload=true;
        if (row.followPerson != this.$store.state.user.name) {
          this.title = "批注";
          this.isShow = true;
        }else {
          this.title="修改进展记录";
        }
        this.fileType = 1;
        if (this.isShow===true){
          this.form.annotationsName=this.$store.state.user.name;
        }
        this.open = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.recordsId != null) {
            updateRecord(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.recordsList=[];
              this.getList();
              // this.$emit('change');
            });
          } else {
            this.form.recordsId = this.uuid;
            addRecord(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              // this.$emit('change');
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const recordsIds = row;
      this.$modal.confirm('是否确认删除该条进展记录信息？').then(function () {
        return delRecord(recordsIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    showDate() {
      var mydate = new Date();
      var str = "" + mydate.getFullYear() + "-";
      str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
      str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
      return str;
    },
    formatterDate(date) {
      var mydate = new Date(date);
      var str = "" + mydate.getFullYear() + "-";
      str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
      str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
      return str;
    },
    guid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    },
    selectPerson() {
      this.openPersonVisible = true;
    },
    selectUser(userId, userName, phone, position) {
      // 处理选择企业人员的情况
      if (userName) {
        this.form.enterprisePerson = userName;
        this.form.enterprisePersonId = userId;
      }
      // 关闭弹窗
      this.openPersonVisible = false;
    },
  }
};
</script>
<style>
.el-descriptions-item__label {
  margin-left: 5px;
}

.el-descriptions__header {
  padding: 0px;
}

.el-descriptions-item__label.has-colon::after {
  content: "";
}
</style>
